<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
    <style>
        *{margin: 0;padding: 0}
        .jindutiao{
           
            width: 98%;
            HEIGHT:2rem;border: 1px solid #000;
            border-radius:2rem;
            
                
        }
        .jingdu{
            position: absolute;
            width: 98%;
            height:2rem;
            border-radius:2rem;
            animation: move 4s;
            background: -webkit-linear-gradient(left,red, pink,skyblue); /* Safari 5.1 - 6.0 */
  
        }
        @keyframes move {
    0%{
        width:0;
        background: -webkit-linear-gradient(left,red, pink); /* Safari 5.1 - 6.0 */
  
    }
    50%{
        width:50%;
        background: -webkit-linear-gradient(left,red, pink,yellow); /* Safari 5.1 - 6.0 */
 
        
    }
    100%{
        width:98%;
        background: -webkit-linear-gradient(left,red, pink,skyblue); /* Safari 5.1 - 6.0 */
  
    }
}
.pic{
    background: url(1232.jpg) no-repeat center;
}
.da{
    background: url("p.jpg") no-repeat center
}
    </style>
</head>
<body>
        <div style="padding-top:65% class="P">
                       </div>
   <div class="jindutiao ">
      
       <div class="jingdu"></div>
   </div>
   <div style="padding-left:13rem" class="s">此网站由李斯文独家制作</div>
   <div class="wi"></div>
   <div class="cont" >
       <div class="namea" style="display:none">
            <div class="">你叫什么名字</div>
            <input type="text" class="name">
            <button class="btn">
                    点击确认
                </button> 
       </div>
        <div class="olda" style="display:none">
                <div>你多大了</div>
                <input type="text" class="old">周岁
                <button class="btn1">
                        点击确认
                    </button> 
        </div>
       <div class="paty" style="display:none">
            <div>生日是什么时候</div>
            <input type="text" class="patya" placeholder="请输入0-00样式">
            <button class="btn2">
                    点击确认
                </button> 
       </div>
       
      
   </div>
   <div class="hah" style="display:none">
   <div class="n">这个是不是你~~</div>
   <div class="pic"  style=" width:100%;height:44rem">
    </div>
        
   </div>

   <div class="zhufu" style="display:none">
       <embed src="shengri.mp3" autostart="true" loop="true" hidden="true"></embed> 
        
        今天是公元2018年1月22日，是我们小仙女的生日。祝张莹莹童鞋生日快乐，愿你能开开心心的保持年轻的心态，所想的事情能实现；愿你今后的每次哭泣都是喜极而泣；    愿你每一次难过有人陪
   </div>

   <div class="da" style="width:100%;height:30rem;display:none">
        
   </div>
</body>
</html>
<script>
    var width=0
    $(".wi").html(width)
    // var a=0
   var timer= setInterval(() => {
       
    width++
    
   $(".wi").html(width+"%")
    //     width++
        // console.log(a)
        // $(".jingdu").css({
        //     width:width+"%",
        //     backgroundColor:"red"
        // })
        // if(width==77){
        //     clearTimeout(timer)
           
        // }
       if(width===100)
       clearInterval(timer)
    },40);
    var  tie=setTimeout(()=>{
        $(".P").fadeOut(1000)
        $(".jindutiao").fadeOut(1000)
        $(".s").fadeOut(1000)
        $(".wi").fadeOut(1000)
    },8000)
   
    var t=setTimeout(()=>{
        clearTimeout(tie)
        $(".namea").fadeIn()
    },10000)
      
     $(".btn").on("click",function(){
        if($(".name").val()=="张莹莹" || $(".name").val()=="莹莹"){
            $(".namea").fadeOut(2000)
            $(".olda").fadeIn(3000)
          
        }
       
         })   
         $(".btn1").on("click",function(){
         
            if($(".old").val()=="24"){
              
                $(".olda").fadeOut(2000)
                $(".paty").fadeIn(4000)
            }
            }) 
            $(".btn2").on("click",function(){
         
         if($(".patya").val()=="1-22"){
           
             
            $(".cont").fadeOut(2000)
            $(".hah").fadeIn(4000)
            setTimeout(()=>{
                $(".hah").fadeOut()
                $(".zhufu").fadeIn(2000)
            },8000)
            
            setTimeout(()=>{
                $(".zhufu").fadeOut(2000)
                $(".da").fadeIn(2000) 
                },15000)
         }
         }) 

        


    
    // $(".wi").html(a+"%")
</script>